<template>
    <div>
     <!--  <Button style="margin: 10px 0;" type="primary" @click="reTurna(true)">添加</Button> -->
      <Card>
        <!-- <Button style="margin: 10px 0;" type="primary" @click="reTurna(true)">返回省级</Button> -->
      <div ref="domsss" id="fdf" class="charts chart-radar" style="height:600px;"></div>
      </Card>
     </div> 
      
</template>
<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
import geoJson from './../../data/HK.json'
//gansu,guangdong,guangxi,guizhou,hainan,hebei,heilongjiang,henan,hubei,hunan,jiangsu,jiangxi,jilin,liaoning,neimenggu,
//ningxia,qinghai,shandong,shanghai,shanxi,shanxi1,sichuan,taiwan,tianjin,xianggang,xinjiang,xizang,yunnan,zhejiang,anhui,aomen,beijing,chongqi,fujian
import gansu from './../../data/province/gansu.json'
import guangdong from './../../data/province/guangdong.json'
import guangxi from './../../data/province/guangxi.json'
import guizhou from './../../data/province/guizhou.json'
import hainan from './../../data/province/hainan.json'
import hebei from './../../data/province/hebei.json'
import heilongjiang from './../../data/province/heilongjiang.json'
import henan from './../../data/province/henan.json'
import hubei from './../../data/province/hubei.json'
import hunan from './../../data/province/hunan.json'
import jiangsu from './../../data/province/jiangsu.json'
import jiangxi from './../../data/province/jiangxi.json'
import jilin from './../../data/province/jilin.json'
import liaoning from './../../data/province/liaoning.json'
import neimenggu from './../../data/province/neimenggu.json'
import ningxia from './../../data/province/ningxia.json'
import qinghai from './../../data/province/qinghai.json'
import shandong from './../../data/province/shandong.json'
import shanghai from './../../data/province/shanghai.json'
import shanxi from './../../data/province/shanxi.json'
import shanxi1 from './../../data/province/shanxi1.json'
import sichuan from './../../data/province/sichuan.json'
import taiwan from './../../data/province/taiwan.json'
import tianjin from './../../data/province/tianjin.json'
import xianggang from './../../data/province/xianggang.json'
import xinjiang from './../../data/province/xinjiang.json'
import xizang from './../../data/province/xizang.json'
import yunnan from './../../data/province/yunnan.json'
import zhejiang from './../../data/province/zhejiang.json'
import anhui from './../../data/province/anhui.json'
import aomen from './../../data/province/aomen.json'
import beijing from './../../data/province/beijing.json'
import chongqing from './../../data/province/chongqing.json'
import fujian from './../../data/province/fujian.json'

import chinaJson from './../../data/china.json'
import { on, off } from '@/libs/tools'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartMap',
  props: {
    value: Object,
    text: String,
    subtext: String,
  },
  data () {
    return {
      dom: null,
    //    datassssMap : { '北京':'beijing' }, { '天津':'tianjin'  }, {'上海':'shanghai'  }, {'重庆':'chongqi'}, {'河北':'hebei'}, {'河南':'henan'}, {'云南':'yunnan'}, {'辽宁':'yunnan'  }, { '黑龙江': 'heilongjiang' }, {'湖南':'hunan'}, {'安徽':'anhui' }, {'山东':'shandong' },
    // { '新疆':'xinjiang'  }, { '江苏': 'jiangsu' }, {'浙江':'zhejiang' }, { '江西': 'shanxi' }, {'湖北':'hebei'  }, {'广西': 'guangxi' }, {'甘肃':'gansu'  }, { '山西': 'shanxi' }, {  '内蒙古':'neimenggu'  }, {'陕西':'shanxi1'  }, {'吉林':'jilin'  }, { '福建':'fujian'  }, {'贵州':'guizhou'},
    // {'广东':'guangdong'  }, {'青海':'qinghai'}, {'西藏':'xizang'  }, { '四川': 'sichuan' }, { '宁夏':'ningxia'  }, {'海南':'hainan'},{'台湾':'taiwan'}, {'香港':'xianggang'  }, { '澳门': 'aomen' }]
    // }
      //datassssMap: new Map([['北京', 'beijing'], ['天津', 'tianjin'], ['上海', 'shanghai'], ['重庆', 'chongqi'], ['河北','hebei'], ['河南', 'henan'], ['云南', 'yunnan'], ['辽宁', 'yunnan'], ['黑龙江', 'heilongjiang'], ['湖南', 'hunan'], ['安徽', 'anhui'], ['上海', 'shanghai'], ['山东', 'shangdong'], ['新疆', 'xinjiang'], ['江苏', 'jiangsu'], ['浙江', 'zhejiang'], ['江西', 'shanxi'], ['湖北', 'hebei'], ['广西', 'guangxi'], ['甘肃', 'gansu'], ['山西', 'shanxin'], ['内蒙古', 'neimenggu'], ['陕西', 'shanxi1'], ['吉林', 'jilin'], ['福建', 'fujian'], ['贵州', 'guizhou'], ['广东', 'guangdong'], ['青海', 'qinghai'], ['西藏', 'xizang'], ['四川', 'sichuan'], ['宁夏', 'ningxia'], ['海南', 'hainan'], ['台湾', 'taiwan'], ['香港', 'xianggang'], ['澳门', 'aomen']])
      datassssMap: new Map([['北京', beijing], ['天津', tianjin], ['上海', shanghai], ['重庆', chongqing], ['河北',hebei], ['河南', henan], ['云南', yunnan], ['辽宁', liaoning], ['黑龙江', heilongjiang], ['湖南', hunan], ['安徽', anhui], ['上海', shanghai], ['山东', shandong], ['新疆', xinjiang], ['江苏', jiangsu], ['浙江', zhejiang], ['江西', jiangxi], ['湖北', hebei], ['广西', guangxi], ['甘肃', gansu], ['山西', shanxi], ['内蒙古', neimenggu], ['陕西', shanxi1], ['吉林', jilin], ['福建', fujian], ['贵州', guizhou], ['广东', guangdong], ['青海', qinghai], ['西藏', xizang], ['四川', sichuan], ['宁夏', ningxia], ['海南', hainan], ['台湾', taiwan], ['香港', xianggang], ['澳门', aomen]])
    }
  }, 
  methods: {
    resize () {
      this.dom.resize()
    },
    reTurna(flag){
       console.log('点击了返回省级按钮');
       this.chinaMap();
    },
    chinaMap(){
echarts.registerMap('HK', chinaJson);
let _this444=this;
     let option = {
      //  backgroundColor: '#2b85e4',
        title: {
            text: '中国人口密度 （2011）',
            subtext: '人口密度数据来自Wikipedia',
            sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
        }, 
        tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} (p / km2)'
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {}
            }
        },
        visualMap: {
            min: 800,
            max: 50000,
            text:['High','Low'],
            realtime: false,
            calculable: true,
            inRange: {
                color: ['lightskyblue','yellow', 'orangered']
            }
        },
        series: [
            {
                name: '香港18区人口密度',
                type: 'map',
                mapType: 'HK', // 自定义扩展图表类型
                itemStyle:{
                    normal:{label:{show:true}},
                    emphasis:{label:{show:true}}
                },
                // data:[
                //     {name: '中西区', value: 20057.34},
                //     {name: '湾仔', value: 15477.48},
                //     {name: '东区', value: 31686.1},
                //     {name: '南区', value: 6992.6},
                //     {name: '油尖旺', value: 44045.49},
                //     {name: '深水埗', value: 40689.64},
                //     {name: '九龙城', value: 37659.78},
                //     {name: '黄大仙', value: 45180.97},
                //     {name: '观塘', value: 55204.26},
                //     {name: '葵青', value: 21900.9},
                //     {name: '荃湾', value: 4918.26},
                //     {name: '屯门', value: 5881.84},
                //     {name: '元朗', value: 4178.01},
                //     {name: '北区', value: 2227.92},
                //     {name: '大埔', value: 2180.98},
                //     {name: '沙田', value: 9172.94},
                //     {name: '西贡', value: 3368},
                //     {name: '离岛', value: 806.98}
                // ],
                // 自定义名称映射
                nameMap: {
                    'Central and Western': '中西区',
                    'Eastern': '东区',
                    'Islands': '离岛',
                    'Kowloon City': '九龙城',
                    'Kwai Tsing': '葵青',
                    'Kwun Tong': '观塘',
                    'North': '北区',
                    'Sai Kung': '西贡',
                    'Sha Tin': '沙田',
                    'Sham Shui Po': '深水埗',
                    'Southern': '南区',
                    'Tai Po': '大埔',
                    'Tsuen Wan': '荃湾',
                    'Tuen Mun': '屯门',
                    'Wan Chai': '湾仔',
                    'Wong Tai Sin': '黄大仙',
                    'Yau Tsim Mong': '油尖旺',
                    'Yuen Long': '元朗'
                },
                // 全国省份列表
    data : [{ name: '北京' }, { name: '天津' }, { name: '上海' }, { name: '重庆' }, { name: '河北' }, { name: '河南' }, { name: '云南' }, { name: '辽宁' }, { name: '黑龙江' }, { name: '湖南' }, { name: '安徽' }, { name: '山东' },
    { name: '新疆' }, { name: '江苏' }, { name: '浙江' }, { name: '江西' }, { name: '湖北' }, { name: '广西' }, { name: '甘肃' }, { name: '山西' }, { name: '内蒙古' }, { name: '陕西' }, { name: '吉林' }, { name: '福建' }, { name: '贵州' },
    { name: '广东' }, { name: '青海' }, { name: '西藏' }, { name: '四川' }, { name: '宁夏' }, { name: '海南' }, { name: '台湾' }, { name: '香港' }, { name: '澳门' }]
    // 需要在页面上直接标记出来的城市
    // var specialMap = ['浙江', '云南', '陕西'];

            }
        ]
     }
      // var fdf=document.getElementById("#fdf");
      // this.dom = echarts.init(fdf, 'tdTheme');
      console.log(this.$refs.domsss);
      this.dom = echarts.init(this.$refs.domsss, 'tdTheme')
       this.dom.showLoading();
      // this.dom.setOption(this.value.option)
var dsds=this.dom;

       setTimeout(function(){
         dsds.setOption(option,true)
          dsds.hideLoading();
       },1000)


      
//在init方法中加入下面这行代码
// window.addEventListener("resize", this.dom.resize);
var dsds=this.dom;

var fdsss=this.datassssMap;
console.log(this.datassssMap);
//添加点击事件
this.dom.on('click', function(param) {
var name = param.name;
console.log(param);
let _this12=_this444;
console.log(_this12)
// alert(name)
// for (var n = 0, nL = cityArr.length; n < nL; n++) {
// if (name == cityArr[n].name) {//这里判断所点击的省份是否等于该处的数据，如果等于则把该省份的对应的id赋值到链接以便省份页面可以获取到该id调用数据

// location.href = 'provinceMap.html?proviceId=' + cityArr[n].id + '&&proviceName=' + name;
// break;
// } else {
// console.log(name)
// }
// }

console.log(fdsss);
let sss=fdsss.get(name);

// off(window, 'resize', this.resize)
echarts.registerMap('HK', sss);
     let option2 = {
      //  backgroundColor: '#2b85e4',
        title: {
            text: name+'省 人口密度 （2011）',
            subtext: '人口密度数据来自Wikipedia',
            sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} (p / km2)'
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: {readOnly: false},
                restore: {},
                saveAsImage: {},
                myTool1: {  
                  show: true,  
                  title: '返回省级',  
                  icon: 'image://http://echarts.baidu.com/images/favicon.png',  
                  onclick: function (){  
                    console.log('点击 返回省级 按钮');
                    let _this=_this12;
                    // var _this = this;//这句话的位置需要注意
                    console.log(_this)
                    _this.chinaMap();
                  }  
                }
            }
        },
        visualMap: {
            min: 800,
            max: 50000,
            text:['High','Low'],
            realtime: false,
            calculable: true,
            inRange: {
                color: ['lightskyblue','yellow', 'orangered']
            }
        },
        series: [
            {
                name: '香港18区人口密度',
                type: 'map',
                mapType: 'HK', // 自定义扩展图表类型
                itemStyle:{
                    normal:{label:{show:true}},
                    emphasis:{label:{show:true}}
                },
                  data:[
                   {name:'遵义市',value:'20'}, 
                    {name:'铜仁市',value:'10'}, 
                                    {name:'六盘水市',value:'30'}, 
                                    {name:'安顺市',value:'50'}, 
                                    {name:'贵阳市',value:'15'},
                                    {name:'黔东南苗族侗族自治州',value:'33'}
                ],
                // 全国省份列表
    // data : [{ name: '北京' }, { name: '天津' }, { name: '上海' }, { name: '重庆' }, { name: '河北' }, { name: '河南' }, { name: '云南' }, { name: '辽宁' }, { name: '黑龙江' }, { name: '湖南' }, { name: '安徽' }, { name: '山东' },
    // { name: '新疆' }, { name: '江苏' }, { name: '浙江' }, { name: '江西' }, { name: '湖北' }, { name: '广西' }, { name: '甘肃' }, { name: '山西' }, { name: '内蒙古' }, { name: '陕西' }, { name: '吉林' }, { name: '福建' }, { name: '贵州' },
    // { name: '广东' }, { name: '青海' }, { name: '西藏' }, { name: '四川' }, { name: '宁夏' }, { name: '海南' }, { name: '台湾' }, { name: '香港' }, { name: '澳门' }]
    // 需要在页面上直接标记出来的城市
    // var specialMap = ['浙江', '云南', '陕西'];

            }
        ]
     }
//  dom = echarts.init(this.$refs.dom, 'tdTheme')
      // this.dom.setOption(this.value.option)
       dsds.showLoading();
       setTimeout(function(){
     dsds.setOption(option2,true)
     dsds.hideLoading();
       },800)
    
on(window, 'resize', this.resize)

});
      on(window, 'resize', this.resize)


    }
  },
  mounted () {
    this.$nextTick(() => {
// let data = this.value.data;

// let option=this.value.option;
     console.log(this.value);
    
this.chinaMap();
// this.dom.showLoading();

// $.get('data/asset/geo/HK.json', function (geoJson) {

    // this.dom.hideLoading();

    // echarts.registerMap('HK', geoJson);
    // echarts.registerMap('HK', liaoningJson);
    })
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
